<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>
    <!-- 引入Bootstrap样式表，用于页面布局和组件美化 -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
    <!-- 引入AdminLTE样式表，提供后台管理系统常用样式 -->
    <link rel="stylesheet" th:href="@{/css/AdminLTE.min.css}">
    <!-- 引入分页组件样式表 -->
    <link rel="stylesheet" th:href="@{/css/pagination.css}">
    <!-- 引入jQuery库，用于处理DOM操作和AJAX请求 -->
    <script th:src="@{/js/jquery.min.js}"></script>
</head>
<body>
<!-- 页面主体内容区域，使用AdminLTE的box-body样式 -->
<div class="box-body">
    <!-- 左侧功能区：仅当登录用户为ADMIN角色时显示 -->
    <div class="pull-left" th:if="${session.user != null && session.user.role == 'ADMIN'}">
        <div class="btn-group">
            <!-- 新增图书按钮，点击可跳转到新增图书页面（当前未实现跳转逻辑） -->
            <button type="button" class="btn btn-default">新增</button>
        </div>
    </div>

    <!-- 右侧搜索区：使用pull-right样式右对齐 -->
    <div class="pull-right">
        <div class="has-feedback">
            <!-- 图书搜索表单：提交到/book/search路径，使用POST方法 -->
            <form th:action="@{/book/search}" method="post">
                图书名称：<input type="text" name="name"/>  <!-- 图书名称搜索框，参数名name -->
                图书作者：<input type="text" name="author"/>  <!-- 图书作者搜索框，参数名author -->
                <input class="btn btn-default" type="submit" value="查询">  <!-- 查询提交按钮 -->
            </form>
        </div>
    </div>

    <!-- 图书列表表格区域 -->
    <div class="table-box">
        <!-- 使用Bootstrap的表格样式：边框、居中、条纹效果 -->
        <table class="table table-bordered text-center table-striped" id="dataList">
            <thead>
            <tr>
                <th>图书名称</th>
                <th>图书作者</th>
                <th>出版社</th>
                <th>图书状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!-- 遍历图书列表数据：th:each="book : ${books}"表示循环取出模型中的books集合 -->
            <th:block th:each="book : ${books}">
                <tr>
                    <td th:text="${book.name}"></td>  <!-- 显示图书名称 -->
                    <td th:text="${book.author}"></td>  <!-- 显示图书作者 -->
                    <td th:text="${book.publisher}"></td>  <!-- 显示出版社 -->
                    <td>
                        <!-- 根据图书状态显示对应文本：0-可借阅，1-借阅中，2-归还中 -->
                        <th:block th:if="${book.status == '0'}">可借阅</th:block>
                        <th:block th:if="${book.status == '1'}">借阅中</th:block>
                        <th:block th:if="${book.status == '2'}">归还中</th:block>
                    </td>
                    <td class="text-center">
                        <!-- 操作按钮：根据图书状态显示不同按钮 -->
                        <!-- 当图书状态为0（可借阅）时，显示可点击的借阅按钮 -->
                        <button th:if="${book.status == '0'}" type="button" class="btn bg-olive btn-xs"
                                th:onclick="findBookById('[[${book.id}]]')">借阅
                        </button>
                        <!-- 当图书状态为1（借阅中）或2（归还中）时，显示禁用的借阅按钮 -->
                        <button th:if="${book.status == '1' || book.status == '2'}" type="button"
                                class="btn bg-olive btn-xs" disabled="true">借阅
                        </button>
                    </td>
                </tr>
            </th:block>
            </tbody>
        </table>
    </div>
</div>

<!-- JavaScript脚本区域 -->
<script>
    /**
     * 图书借阅函数：发送AJAX请求到后端，申请借阅指定ID的图书
     * @param id 图书ID（从页面元素中获取的动态值）
     */
    function findBookById(id) {
        // 使用jQuery的get方法发送请求到/book/find/{id}路径
        $.get("/book/find/" + id)
    }
</script>
</body>
</html>